<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-08 17:21:00
-->
<template>
  <div class="article_container">
    <!-- 头部 -->
    <Header></Header>
   <div class="article">
    <div class="title">{{article.title}}</div>
    <div class="info"> 
      {{article.publishTime}}
    </div>
    <div class="content" v-html="article.content"></div>
    <div class="img">  <img :src="article.cover" alt=""> </div>
  </div>

<Dibu> </Dibu>
  </div>
</template>
<script>
import {get} from '../utils/request'
// 1. 导入
import Header from './components/Header'
import Dibu from './components/Dibu'
export default {
  // 2. 注册
  components:{
    Header,
    Dibu
  },
  data(){
    return {
      article :{}
    }
  },
  created(){
    // 1.获取项目id
    let articleId =this.$route.query.articleId;
    // 2.通过项目id查询项目
    let url = "/index/article/findById"
    let param = {id:articleId}
    get(url,param).then(resp => {
      this.article = resp.data;
    })
    // 3.展示到页面中
  }
}
</script>

<style>
.article img {
  width: 100% !important;
  margin: .5em 0;
}
</style>
<style lang="scss" scoped>
.article_container {
  .article {
    width: 90%;
    margin: 0 auto;
    img {
      width: 100%;
      margin: .5em 0;
    }
    .title {
      font-weight: bolder;
      font-size: 18px;
      line-height: 2em;
      text-align: center;
    }
    .info {
      text-align: center;
    }
    
  }
}
</style>